import React from 'react';
import ProForm, { ModalForm, ProFormRadio, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const OptForm: React.FC<any> = (props) => {
  const { 
    handleModalVisible, 
    handleAdd, 
    record = {}
  } = props;

  return <ModalForm
      className="modal-form"
      width="40%"
      title="回复咨询"
      visible
      modalProps={{
        maskClosable: false
      }}
      onVisibleChange={handleModalVisible}
      onFinish={async (value) => {
        console.log(value)
        const params = {
          consult_id: record.consult_id,
          problem: value.problem,
          recommend: value.recommend,
          reply: value.reply,
          status: 'S'
        }
        const success = await handleAdd(params as SHOPAPI.ShopConsulting)
        if (success) {
          handleModalVisible(false)
        }
      }}
      submitter={{
        searchConfig: {
          resetText: '取消',
          submitText: '回复'
        }
      }}>
      <ProForm.Group>
        <ProFormText
          label="问题"
          placeholder="请输入问题"
          width="md"
          initialValue={record.problem}
          name="problem"
        />
      </ProForm.Group>
          
      <ProForm.Group>
        <ProFormTextArea
          label="回复"
          rules={
            [
              {
                required: true
              }
            ]
          }
          placeholder="限50字内"
          width="md"
          fieldProps={{
            maxLength: 50,
            style: {
              fontSize: 12
            }
          }}
          name="reply"
        />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormRadio.Group
          label="推荐展示"
          width="md"
          name="recommend"
          initialValue={record.recommend || '1'}
          options={[
            {
              label: '是',
              value: '1'
            },
            {
              label: '否',
              value: '0'
            }
          ]}
        />
      </ProForm.Group>
      <div className="modal-tips" style={{marginTop: 0}}>
        <ExclamationCircleOutlined style={{paddingLeft: 0}}/>
        <span>可以对问题重新编辑后进行回复</span>
      </div>
    </ModalForm>
}
export default OptForm;
